var Accordian=function Accordian(id,dataMapId){
	this.parent(id, dataMapId);
	this.componentName="Accordian";
	
	this.wrapper=null;
	this.headers=null;
	this.contents=null;
	
	this.setElements();
	
}.inherits(Component);

Accordian.prototype.setElements=function(){
	var i,l,top=0;
	
	 this.wrappers=document.querySelectorAll('#' + this.element.id + ' > div');
	 this.headers=document.querySelectorAll('#' + this.element.id + ' > div > div:first-child');
	 this.contents=document.querySelectorAll('#' + this.element.id + ' > div > div:last-child');
	 
	    // Assign default styles
	    for (i=0, l=this.wrappers.length; i<l; i++) {
	        this.wrappers[i].style.top = top + 'px';
	        this.wrappers[i].style.webkitTransitionProperty = '-webkit-transform';
	        this.wrappers[i].style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)';
	        this.wrappers[i].style.webkitTransitionDuration = '0';
	        this.wrappers[i].style.webkitTransform = translateOpen + '0,0' + translateClose;
	        this.wrappers[i]._pos = i;
	        top += this.wrappers[i].offsetHeight;
	    }
	    
	    this.element.style.height = top + 'px';

	    for (i=0, l=this.headers.length; i<l; i++) {

	        this.headers[i].addEventListener('click', this, false);
	    }

	    for (i=0, l=this.contents.length; i<l; i++) {
	    	this.contents[i].style.webkitTransitionProperty = '-webkit-transform';
	    	this.contents[i].style.webkitTransitionTimingFunction = 'cubic-bezier(0,0,0.25,1)';
	    	this.contents[i].style.webkitTransitionDuration = '0';
	    	this.contents[i].style.webkitTransform = translateOpen + '0,0' + translateClose;
	    }	 
};

Accordian.prototype.handleEvent=function(e){
	if(e.type=="click"){
		this._onItemClick(e);
	} else if (e.type == 'webkitTransitionEnd') {
        this.transitionEnd(e);
    }

};

Accordian.prototype._onItemClick=function(e){
    var that = this,
    targetWrapper = e.currentTarget.parentNode,
    targetHandle = targetWrapper.querySelector('.head'),
    targetAccordion = targetWrapper.querySelector('.content'),
    openedWrapper = that.element.querySelector('.acOpen'),
    time = height = fullHeight = elTop = 0,
    openedAccordion, i, l,
    el = targetWrapper;
    
	height = targetAccordion.offsetHeight;
	time = Math.min(height + 100, 800) + 'ms';
	
	targetAccordion.style.top = targetHandle.offsetTop + targetHandle.offsetHeight - height + 'px';
	targetWrapper.style.height = height + targetHandle.offsetHeight + 'px';
		
	if (openedWrapper == targetWrapper) {
	    height = 0;
	}
	
	targetAccordion.style.webkitTransform = translateOpen + '0,' + height + 'px' + translateClose;
	targetAccordion.style.webkitTransitionDuration = time;
	targetWrapper.className = 'acOpen';
	if (openedWrapper) {
	    openedWrapper.className = 'acClose';
	
	    openedAccordion = openedWrapper.querySelector('div:last-child');
	    openedAccordion.style.webkitTransform = translateOpen + '0,0' + translateClose;
	    openedAccordion.style.webkitTransitionDuration = time;
	}
	
	for (i=0, l=that.wrappers.length; i<l; i++) {
	    fullHeight+= that.headers[i].offsetHeight;
	
	    if (that.wrappers[i]._pos > targetWrapper._pos) {
	        that.wrappers[i].style.webkitTransitionDuration = time;
	        that.wrappers[i].style.webkitTransform = translateOpen + '0,' + height + 'px' + translateClose;
	    } else {
	        that.wrappers[i].style.webkitTransitionDuration = time;
	        that.wrappers[i].style.webkitTransform = translateOpen + '0,0' + translateClose;
	    }
	}
	
	that.element.style.height = fullHeight + height + 'px';
	
	document.addEventListener('webkitTransitionEnd', that, false);
	
	if (that.scroll) {
	    do {
	        elTop += el.offsetTop;
	    } while (el = el.offsetParent);
	    setTimeout(function () { that.timedScroll(elTop, 500); }, 0);
	//  setTimeout(function () { window.scrollTo(0, targetWrapper.offsetTop); }, 0);
	}
};

Accordian.prototype.transitionEnd= function (e) {
    var that = this,
        closedWrapper = that.element.querySelector('.acClose');

    document.removeEventListener('webkitTransitionEnd', that, false);
    
    if (closedWrapper) {
        closedWrapper.className = '';
        closedWrapper.style.height = '';
    }
}

//Is translate3d compatible?
var has3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()),
    translateOpen = 'translate' + (has3d ? '3d(' : '('),
    translateClose = has3d ? ',0)' : ')';
